<template>
	<div class="aside">
		<el-menu
			style="width: 200px;height: 100%"
			default-active="2"
			class="el-menu-vertical-demo"
			@open="handleOpen"
			@close="handleClose">
			
			<el-submenu index="1">
				<template slot="title">
					<i class="el-icon-reading"></i>
					课程管理
				</template>
				<el-menu-item index="1-1">
					<i class="el-icon-document"></i>
					<router-link :to="{ name: 'all' }">所有课程</router-link>
				</el-menu-item>
				<el-menu-item index="1-2">
					<i class="el-icon-document-add"></i>
					<router-link :to="{ name: 'new' }">发布课程</router-link>
				</el-menu-item>
			</el-submenu>
			
			<el-submenu index="2">
				<template slot="title">
					<i class="el-icon-user"></i>
					用户管理
				</template>
				<el-menu-item index="2-1">
					<i class="el-icon-document"></i>
					<router-link :to="{ name: 'alluser' }">所有用户</router-link>
				</el-menu-item>
			</el-submenu>
			
			<el-submenu index="3">
				<template slot="title">
					<i class="el-icon-s-unfold"></i>
					分类管理
				</template>
				<el-menu-item index="3-1">
					<i class="el-icon-collection-tag"></i>
					<router-link :to="{ name: 'allclass' }">所有分类</router-link>
				</el-menu-item>
			</el-submenu>
			
			
			
		</el-menu>
	</div>
</template>

<script lang="ts">
	import {Vue, Component} from "vue-property-decorator"
	
	@Component
	export default class asideComponents extends Vue {
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		}
	}
</script>

<style scoped lang="less">
.aside{
	position: fixed;
	width: 200px;
	height: 100%;
	z-index: 99;
	top: 60px;
}

.router-link-exact-active{
	color: #ffd04b;
}
</style>